<template>
  <div>
    <div>即将上映</div>
    <hr>
    <div>{{$store.state.will.info}}</div>
    <div>{{info}}</div>
    <!-- <div>{{info1}}</div> -->
  </div>
</template>
<script>
// createNamespacedHelpers方法是vuex内置的
import { createNamespacedHelpers } from 'vuex'
// 借助辅助函数可以一次性去掉store的模块名称（方法的参数是模块名称）
// 这样在使用映射函数时就不再需要模块名称了
const { mapState } = createNamespacedHelpers('will')

export default {
  // name的值用于给调试工具devtools使用，通过该名称知道是哪个组件
  name: 'WillMovie',
  computed: {
    // 这里的写法和不拆分模块就完全一样了
    ...mapState(['info'])
  }
  // computed: {
  //   // 1. 通过计算属性优化插值表达式
  //   // info () {
  //   //   return this.$store.state.will.info
  //   // },
  //   // 2. 映射写法：数组参数
  //   // ...mapState('will', ['info'])
  //   // 3. 映射写法：对象参数
  //   // ...mapState('will', {
  //   //   info1: 'info'
  //   // })
  //   // 4. 不加模块名称的映射
  //   ...mapState({
  //     // info (state) {
  //     //   return state.will.info
  //     // },
  //     info: state => state.will.info
  //   })
  // }
}
</script>
